<template>
	<view class="c-page" :class="ggclass" :style=[styles]>
		<c-loading-page v-if="value==0" :value="value==0"></c-loading-page>
		<slot v-else-if="value==1"></slot>
		<view class="empty-wrap" v-if="value==2">
			<image :src="src" mode="widthFix"></image>
			<view>{{ text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			text: {
				// 说明文字
				type: String,
				default: '这里空空如也...'
			},
			ggclass: {
				type: String,
				default: ''
			},
			src: {
				// 图片地址
				type: String,
				default: '/static/img/empty.png'
			},
			value: {
				type: [Number, String],
				default: 0
			},
			width:{
				type:String,
				default:''
			},
			height:{
				type:String,
				default:''
			},
			padding:{
				type:String,
				default:''
			},
		},
		data() {
			return {}
		},
		computed:{
			styles(){
				let params ={
					width:this.$rpxunit(this.width),
					height:this.$rpxunit(this.height),
					padding:this.padding.split(' ').map(v => this.$rpxunit(v)).join(' ')
				}
				return params
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-page {
		width: 100%;
		height: 100%;
		flex: 1;
	}

	.empty-wrap {
		width: 100%;
		padding-top: 120rpx;
		box-sizing: border-box;

		image {
			width: 350rpx;
			height: 290rpx;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		view {
			text-align: center;
			font-size: 26rpx;
			letter-spacing: 1rpx;
			color: #a1adbd;
			margin-top: 5rpx;
		}
	}
</style>